<template>

    <div style="margin-left: 250px;width: 900px;marginTop: 50px;">
        <a-card
                class="card"
                :style="{boxShadow: '#eee 20px 15px 105px',marginBottom: '20px',backgroundColor: '#f7f7f7'}"
                hoverable
        >
        <a-space direction="vertical" size="large" :style="{width: '80%',marginTop: '50px'}">
            <a-form :model="form" style="margin-left: 50px">

                <a-form-item field="form.description" label="分析目标">
                    <a-textarea placeholder="在这里输入分析目标,不能超过150个字"
                                :max-length="150"
                                allow-clear
                                show-word-limit
                                v-model="form.description"
                                :auto-size="{ minRows:2, maxRows:4}"
                    />


                </a-form-item>

                <a-form-item field="name" label="图表名称">
                    <a-input v-model="form.name" placeholder="请输入你的图表名称"/>
                </a-form-item>
                <a-form-item field="post" label="图表类型">

                    <a-select v-model="value" :style="{width:'320px'}" placeholder="请选择你想要生成的图表类型">
                        <a-option v-for="item of chartType" :value="item" :label="item.label"/>
                    </a-select>


                </a-form-item>
                <a-form-item label="原始数据:">
                    <a-upload action="http://47.113.195.180:8081/api/get/url" @success="onSuccess" name="file"/>
                </a-form-item>
                <a-form-item>
                    <a-button @click="submit" type="primary" style="margin-left: 120px;margin-top: 30px">智能分析</a-button>
                </a-form-item>



            </a-form>



            <e-charts class="chart" style="margin-left: 80px;margin-top: 30px;" :option="option"/>

        </a-space>
        </a-card>


    </div>






</template>
<script setup>
    import axios from "axios";
    import {reactive, watch} from 'vue'
    import message from "@arco-design/web-vue/es/message";
    import {ref, computed} from "@vue/reactivity";
    import myAxios from '../plugins/myAxios';
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";
    import * as echarts from 'echarts';


    const fileUp = (_, currentFile) => {
        file.value = {
            ...currentFile,
        }

    };




    const formData = new FormData();
    const onSuccess = (res) => {
        formData.append('file', res.file);
        formData.append('chartType', value.value);
        formData.append('goal', form.description);
        formData.append('name', form.name)

    }

    const submit = async () => {

        try {

            const res = await myAxios.post("/chart/gen", formData)

            if (res?.code === 0) {

                if (res?.data){

                    option.value=JSON.parse(res.data.genChart??'');
                }


            } else {
                message.error('生成图表失败！')
            }

        } catch (e) {

            message.error(e.message);
        }
    };


    const value = ref();
    const chartType = [{
        value: '折线图',
        label: '折线图',

    }, {
        value: '柱状图',
        label: '柱状图',

    }, {
        value: '散点图',
        label: '散点图',
    }, {
        value: '雷达图',
        label: '雷达图',
    }]

    const form = reactive({
        description: '',
        name: '',
        post: ''

    })


    const option =ref({});

    watch(() => option, (newValue, oldValue) => {
            if (newValue?.value) {
                option.value = newValue.value

            }
        }, {immediate: true, deep: true}
    )



</script>

<style scoped>

    .chart {

        height: 400px;
    }

</style>
